<template>
  <el-form
    :model="ruleForm"
    label-width="100px"
    :show-message="false"
    ref="form"
    :rules="rules"
    :inline="true"
  >
    <el-form-item
      label="字典类别:"
      prop="dictKey"
    >
      <el-select
        clearable
        filterable
        v-model="ruleForm.dictKey"
        placeholder="字典类别"
      >
        <el-option
          v-for="(item, index) in dictKeyArry"
          :key="index"
          :value="item"
          :label="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="所属门店:"
      prop="storeId"
    >
      <el-select
        clearable
        filterable
        v-model="ruleForm.storeId"
        placeholder="所属门店"
      >
        <el-option
          v-for="item in stores"
          :key="item.id"
          :value="item.id"
          :label="item.storeName"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="字典值:"
      prop="dictValue"
    >
      <el-input
        v-model="ruleForm.dictValue"
        clearable
        maxlength="30"
        placeholder="字典值"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-col
        :span="24"
        align="center"
      >
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >保存</el-button>
          <el-button
            type="error"
            @click="$emit('dialog-close')"
          >取消</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import {
  mapGetters
} from 'vuex';
export default {
  name: 'DialogDataForm',
  props: {
    dictKeyArry: {
      type: Array,
      default: () => [],
    },
    dialogData: {
      type: Object,
      default: () => { },
    }
  },
  computed: {
    ...mapGetters(['stores', 'storesCalue']),
  },
  watch: {
    dialogData: {
      deep: true,
      handler (nv, ov) {
        this.ruleForm = {
          ...this.ruleForm,
          ...this.dialogData
        }
      }
    }
  },
  data () {
    return {
      ruleForm: {
        dictKey: '', //字典类别
        dictValue: '', //字典值
        storeId: '', //门店id
      },
      rules: {
        dictKey: [{
          required: true,
          message: '请选择字典类别',
          trigger: 'change'
        },],
        dictValue: [{
          required: true,
          message: '请输入字典值',
          trigger: 'blur',
        }],
      },
    }
  },
  methods: {
    onSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('handleDataOperate', this.ruleForm, Object.keys(this.dialogData).length > 0 ? 'update' : '');
        } else {
          return false
        }
      })
    }
  },
  mounted () {
    this.ruleForm = {
      ...this.ruleForm,
      ...this.dialogData
    }
  }
}

</script>
<style lang="scss" scoped>
</style>
